<template>
  <div style="width: 100vw;height: 100vh;">
    <van-nav-bar
      title="九宫罗盘"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <div style="position: relative;">
      <van-radio-group v-model="checked" class="dirSelect">
        <van-radio name="1">上南下北</van-radio>
        <van-radio name="2">上北下南</van-radio>
      </van-radio-group>
      <div style="padding: 10px;transition: all 0.5s;" :style="{}">
        <van-row :gutter="space">
          <van-col
            span="8"
            :key="i"
            v-for="(item, i) in checked === '1'
              ? [...compassBase]
              : [...compassBase].reverse()"
            :style="{ marginBottom: space + 'px' }"
          >
            <GridCalc
              :base="item.code"
              :reverse="checked == 2"
              v-if="item.code !== 5"
            />
          </van-col>
        </van-row>
      </div>
    </div>

    <!-- <img
      src="./compass.jpg"
      style="width: 100vw;"
      :style="{ transform: 'rotate(-' + Math.round(540 - alpha) + 'deg)' }"
    />
    <center style="margin-top:70px;">
      指南针<br /><van-switch v-model="compass" />
    </center> -->
  </div>
</template>

<script>
import Grid from "./Grid.vue";
import GridCalc from "./GridCalc.vue";
import compassBase from "./compassBase.js";

export default {
  components: { Grid, GridCalc },
  name: "about",
  data() {
    return {
      compassBase,
      checked: "1",
      space: 6,
      alpha: "",
      compass: true
    };
  },
  watch: {
    compass(flag) {
      if (flag) {
        ondeviceorientationabsolute = event => {
          this.alpha = parseInt(event.alpha);
        };
      } else {
        this.alpha = 180;
        ondeviceorientationabsolute = null;
      }
    }
  },
  created() {
    ondeviceorientationabsolute = event => {
      this.alpha = parseInt(event.alpha);
    };
  },
  beforeDestroy() {
    this.compass = false;
  }
};
</script>

<style scoped>
.dirSelect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 0 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 100;
}
</style>
